<template>
    <div class="container">
        <div>
            <head-bar height="80" middleText="添加客户" :leftClick="returnPage"></head-bar>
        </div>
        <cell-input value="" type="text" label="*" @getVal="getOrgNameVal" title="客户名称"></cell-input>
        <cell-select label="*" :selectData="selectData"
                     @getVal="userTypeVal" title="用户类型"></cell-select>
        <cell-province-city label="*" @getVal="povinceCityVal"></cell-province-city>
        <cell-input type="text" label="*" @getVal="getLinkmanVal" title="联系人"></cell-input>
        <cell-input type="text" label="*" @getVal="getLinkManMobile" title="手机号码"></cell-input>
        <cell-multi-select :class="[userType == 1000 && 'zero-height']" title="主营类型" :list="supperTypeData"
                           @getVal="getSupperTypeVal"></cell-multi-select>
        <cell-input :class="[userType == 1100 && 'zero-height']" @getVal="getBedsVal" type="text"
                    title="床位"></cell-input>
        <div class="remark-area">
            <text class="remark-title">备注</text>
            <textarea style="width: 750px;height: 100px;" @input="getRemarkVal" placeholder="请输入联系结果..."></textarea>
        </div>

        <div class="submit-area" @click="submitForm">
            <text class="submit-btn">保存</text>
        </div>

    </div>
</template>

<style>
    .container {
        background-color: #F6F6F6;
    }

    .remark-area {
        background-color: white;
        margin-top: 10px;
        padding-left: 20px;
        padding-top: 15px;
    }

    .remark-title {
        font-size: 30px;

    }

    .submit-area {
        margin-top: 10px;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        width: 750px;
        height: 90px;
        background-color: #01A65A;
    }

    .submit-btn {
        font-size: 30px;
        color: white;
    }

    .zero-height {
        height: 0px;
    }


</style>

<script>
    import headBar from '../components/headBar.vue'
    import cellInput from '../components/cellInput.vue'
    import cellSelect from '../components/cellSelect.vue'
    import cellProvinceCity from '../components/cellProvinceCity.vue'
    import cellMultiSelect from '../components/cellMultiSelect.vue'

    import nw from '../network/nw.js'

    import utl from '../utils/stringUtils.js'

    import {WxcCell, WxcButton} from 'weex-ui'

    const nav = weex.requireModule('navigator')

    const pref = weex.requireModule('pref')

    const urls = {
        addBuyerUrl: '/app/userBuyer/add',
        addSupperUrl: '/app/userSupplier/add'
    }

    export default {
        components: {WxcButton, headBar, WxcCell, cellInput, cellSelect, cellProvinceCity, cellMultiSelect},
        data() {
            return {
                info: {},
                selectData: [],
//                主营类型，多个以逗号隔开 药品:1000,医疗设备:1100,耗材/试剂:1200,保健食品:1300,化妆品:1400,其他:1500
                supperTypeData: [
                    {title: '药品', value: 1000},
                    {title: '医疗设备', value: 1100},
                    {title: '耗材/试剂', value: 1200},
                    {title: '保健食品', value: 1300},
                    {title: '化妆品', value: 1400},
                    {title: '其他', value: 1500}
                ],
                form: {},//form表单值
                userType: 1100,//1000采购商，1100供应商
                url: urls.addBuyerUrl//表单提交的地址 默认为采购商
            }
        },
        computed: {},
        methods: {

            //返回上个页面
            returnPage() {
                nav.back()
            },
            povinceCityVal(data) {
                this.form.province = data[0]
                this.form.city = data[1]
            },

            userTypeVal(data) {
                var form = this.form
                if (data[0] == 1000 || data[0] == 1200) {
                    this.userType = 1000
                    form.supperType = ''
                    this.url = urls.addBuyerUrl
                } else {
                    this.userType = 1100
                    form.beds = ''
                    this.url = urls.addSupperUrl
                }

                form.orgType = data[1]

            },

            //机构名称
            getOrgNameVal(data) {
                this.form.orgName = data
            },

            //获取联系人
            getLinkmanVal(data) {
                this.form.linkman = data
            },

            //手机号码
            getLinkManMobile(data) {
                this.form.linkmanMobile = data
            },

            //床位
            getBedsVal(data) {
                this.form.beds = data
            },

            //备注
            getRemarkVal(data) {
                this.form.remark = data.value
            },

            //主营类型
            getSupperTypeVal(data) {
                this.form.supperType = data
                var str = ''
                for (let i in data) {
                    str += ',' + data[i]
                }

                if (str) {
                    this.form.supperType = str.substring(1)
                }
            },

            //提交表单
            submitForm() {
                var modal = weex.requireModule('modal')
                var f = this.form
                if (utl.isNonEmpty(f.orgName)) {
                    return modal.toast({message: '客户名称不能为空'})
                }

                if (utl.isUndefinedNull(f.orgType)) {
                    return modal.toast({message: '用户类型不能为空'})
                }
                if (utl.isUndefinedNull(f.province) || utl.isUndefinedNull(f.city)) {
                    return modal.toast({message: '省市不能为空'})
                }
                if (utl.isNonEmpty(f.linkman)) {
                    return modal.toast({message: '联系人不能为空'})
                }
                if (utl.isNonEmpty(f.linkmanMobile)) {
                    return modal.toast({message: '电话不能为空'})
                }

                if (!/^1(3[0-9]|4[56789]|5[0-35-9]|6[6]|7[0135678]|8[0-9]|9[89])[0-9]{8}$/.test(f.linkmanMobile)) {
                    return modal.toast({message: '电话格式不正确'})
                }
//
                nw.postDefine(this.url,{
                    data:f,
                    success(res){
                        nav.push('root:com/yx/customers/customers.js')
                    }
                })
            }
        },

        mounted: function () {
        }
        ,
        created() {

            var userTypeData = pref.getString('userType')
            var self = this
            if (!userTypeData) {
                nw.postDefine('/app/user/register/getUserTypesCityData', {
                    success(res) {
                        pref.setString('cityData', JSON.stringify(res.cityDatas))
                        var data = []
                        for (let i in res.userTypes) {
                            var ele = res.userTypes[i]
                            var dt = {
                                name: ele.bigTypeName,
                                value: ele.bigTypeId,
                                next: []
                            }
                            for (let j in ele.userTypeList) {
                                var d = ele.userTypeList[j]
                                dt.next.push({name: d.userTypeName, value: d.userTypeId})
                            }

                            data.push(dt)
                        }


                        pref.setString('userType', JSON.stringify(data))

                        self.selectData = data

                    }
                })
            } else {
                self.selectData = JSON.parse(userTypeData)
            }
        }
    }
</script>